<template>
    <Row class-name="transfer-item">
        <Col :xs="2" :sm="9" :md="10" :lg="10">
            <Table  
                border 
                ref="selectionLeft" 
                :height="height" 
                :columns="columns" 
                :data="leftData"
                @on-select-all-cancel="handleSelectLAll"
                @on-select-all="handleSelectLAll"
                @on-select-cancel="handleSelectL" 
                @on-select="handleSelectL">
            </Table>
        </Col>
        <Col :xs="20" :sm="6" :md="4" :lg="4" class="transfer-switch">
            <Button 
                size="large" 
                type="success" 
                icon="md-skip-forward" 
                class="btn"
                :disabled="!selectionLeft.length" 
                @click="increase">添加</Button>
            <Button 
                size="large" 
                type="error" 
                icon="ios-skip-backward-outline" 
                class="btn"
                :disabled="!selectionRight.length" 
                @click="decrease">取消</Button>
        </Col>
        <Col :xs="2" :sm="9" :md="10" :lg="10">
            <Table 
                border 
                ref="selectionRight" 
                :height="height" 
                :columns="columns" 
                :data="rigthData"
                @on-select-all-cancel="handleSelectRAll"
                @on-select-all="handleSelectRAll"
                @on-select-cancel="handleSelectR"
                @on-select="handleSelectR">
            </Table>
        </Col>
    </Row>
</template>

<script>
    import { data, column } from './data';

    export default {
        props: {
            height: {
                type: Number,
                default: () => 300
            }
        },
        data () {
            return {
                columns: [...column],
                transferData: [...data],
                rigthData: [],
                leftData: [],
                selectionLeft: [],
                selectionRight: [],
            }
        },
        methods: {
            // 左边表格全选/取消
            handleSelectLAll (selection) {
                this.selectionLeft = [...selection]
            },

            // 右边表格全选/取消
            handleSelectRAll (selection) {
                this.selectionRight = [...selection]
            },

            // 左边表格多选
            handleSelectL (selection, row) {
                this.selectionLeft = [...selection]
            },

            // 右边表格多选
            handleSelectR (selection, row) {
                this.selectionRight = [...selection]
            },

            // 添加
            increase () {
                const ids = this.selectionLeft.map(mp => mp.id)
                const filterRData = this.leftData.filter(el => !ids.some(e => e === el.id))
                this.leftData = [...filterRData]
                this.rigthData = [...this.rigthData, ...this.selectionLeft]
                this.selectionLeft.length = 0
            },

            // 取消
            decrease() {
                const ids = this.selectionRight.map(mp => mp.id)
                const filterRData = this.rigthData.filter(el => !ids.some(e => e === el.id))
                this.rigthData = [...filterRData]
                this.leftData = this.leftData.concat(this.selectionRight)
                this.selectionRight.length = 0
            }
        },
        mounted (){
           // 初始值
           this.leftData = JSON.parse(JSON.stringify(this.transferData))
        }
    }
</script>

<style lang="scss" src="./style.scss"></style>